<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .d1 {
            width: 300px;
            height: 300px;
            background: green;
        }

        .hello {
            width: 400px;
            height: 400px;
            background: red;
            font-size: 20px;
            border-radius: 30px;
        }
    </style>
    <script>
        function index() {
            // ------通过style属性------
            //获取样式    
            var obj = document.getElementById('mydiv');
            // console.log(obj.style.width);//只能获取行内样式


            //设置样式
            // obj.style.backgroundColor = 'red'
            // obj.style.width ='500px';  //必须添加单位
            // obj.style.height='500px';
            // obj.style.fontSize = '30px'



            //------通过类选择器------
            //使用className属性
            //会修改原有的类样式,如果原有的样式权重大于类选择器则不会修改
            // obj.className = 'hello';



            //使用classList属性
            // obj.classList.add('hello')//添加一个类样式
            obj.classList.remove('d1')//删除一个样式
         


        }
    </script>
</head>

<body>
    <button onclick="index();">点我试试</button>
    <br>
    <br>
    <br>
    <!-- <div id="mydiv" style="background-color: red; width: 400px; height: 400px;">Hello World</div> -->
    <div id="mydiv" class="d1">Hello World</div>
</body>

</html>